<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<!-- 格式化快捷键 ctrl + alt + /-->
<h1>注册</h1>
<form action="Iframe.html" method="get">
    <p>用户名:
<!--        type：当前文本框的类型-->
<!--        name：指定表单元素的名称  必填，提交 数据会存在-->
<!--        value：元素的初始值 当type类型为radio时，value必须指定一个值-->
<!--        size：元素的初始宽度-->
<!--        maxlength：元素最大输入的字符数-->
<!--        checked：默认值-->
        <input type="text" name="username" size="10" maxlength="10" placeholder="请输入用户名！"/>
    </p>
    <p>密&nbsp;&nbsp;&nbsp;码:
        <input type="password" name="password"/>
    </p>
    <p>
        请输入邮箱:
<!--      required :非空校验  -->
        <input type="text" name="email" />
        请输入请求地址
        <input type="text" name="url" value="https://www.baidu.com/s?ie=UTF-8&wd=jd" required hidden/>
    </p>
    <p>
        正则表达式验证邮箱
        <input type="text" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" required/>
    </p>
    <p>
        数字验证
<!--        max：最大值
            min：最小值
            step：步长-->
        <input type="number" name="num" step="10" max="100" min="21"/>
    </p>
    <p>
        滑块
        <input type="range" name="voice" step="11"/>
    </p>
    <p>
        搜索框
        <input type="search">
    </p>

    <p>性别:
<!--        单选框  name值一样  一组   必须有value-->
        <input type="radio" name="sex" value="boy" />&nbsp;男
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<!--       checked：默认值 -->
        <input type="radio" name="sex" value="girl" checked/>&nbsp;女
    </p>
    <p>
        多选框:
        <input type="checkbox" name="hobbies" value="sleep"/>睡觉
        <input type="checkbox" name="hobbies" value="game" checked/>游戏
        <input type="checkbox" name="hobbies" value="eat" checked/>吃
        <input type="checkbox" name="hobbies" value="code"/>写代码
    </p>
    <p>
        地区:
<!--        multiple 多选-->
        <select name="area" multiple>
            <option value="state">[选择省]</option>
            <option value="0">江苏省</option>
<!--            selected 默认被选择-->
            <option value="1" selected>上海</option>
            <option value="2">浙江</option>
            <option value="3">广州</option>
        </select>
    </p>

    <p>
        <input type="button" name="btn" value="button" class="btn btn-primary btn-sm"/>
        <button class="btn btn-primary btn-cx">登录</button>
    </p>
    <p>
        <input height="30" width="100" type="image" src="../img/5.png">
    </p>

    <p>
        反馈:
        <textarea name="remark" cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="file" name="file" multiple/>
        <input type="button" value="upload">
    </p>

    <p>
        <label for="mark">你点我试试:</label>
        <input type="text" id="mark"/>
    </p>
    <p>
        <input type="submit" class="btn btn-success" disabled/>
        <input type="reset" class="btn btn-warning"/>
    </p>
</form>
</body>
</html>